<template>
  <div>
    <div class="receipDate">
      <div class="receipDate-title">收货地址</div>
      <div class="receipDate-list">
        <div
          class="receipDate-son"
          v-for="(item, index) in dizhiList"
          :key="index"
        >
          <div class="receipDate-user">
            <div class="receipDate-name">
              <p>{{ item.fullName }}</p>
              <p>{{ item.dizhi }}{{ item.detailed }}</p>
            </div>
            <div class="receipDate-phone">
              <p>{{ item.phone }}</p>
            </div>
          </div>
          <div class="receipDate-caozuo">
            <span>编辑</span>
            <span @click="deldizhi(index)">删除</span>
          </div>
          <div class="moren" v-if="item.moren">默认地址</div>
        </div>

        <el-button
          @click="drawer = true"
          type="primary"
          style="background-color: white; border: 0"
        >
          <div class="receipDate-tianjia">
            <div class="heng"></div>
            <div class="shu"></div>
          </div>
        </el-button>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <div class="addTo">
            <h3>添加新地址</h3>
            <p>
              为了提升用户体验，你提交的信息将同步到您的账号中，便于您在其他相关服务场景中随时使用。
            </p>
            <div class="fullName">
              <input type="text" placeholder="姓名" v-model="fullName" />
            </div>
            <div class="fullName">
              <input type="text" placeholder="手机号码" v-model="phone" />
            </div>

            <div class="region">
              选择地区：
              <el-cascader v-model="diqu" :options="options"></el-cascader>
            </div>

            <div class="fullName">
              <input
                type="text"
                placeholder="详细地址，精确到门牌号、楼层、房间号等"
                v-model="detailed"
              />
            </div>

            <div class="default">
              <label>
                <input type="checkbox" v-model="moren" /> 设置为默认
              </label>
            </div>

            <div class="addressInformation">
              <textarea
                cols="30"
                rows="5"
                placeholder="粘贴地址信息，可以自动识别"
              ></textarea>
              <span>清空</span>
              <span>使用</span>
            </div>

            <div class="addBtns">
              <button>取消</button>
              <button @click="baochun">保存</button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dizhiList: null,
      drawer: false,
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "从化区",
                  label: "从化区",
                },
                {
                  value: "白云区",
                  label: "白云区",
                },
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "黄埔区",
                  label: "黄埔区",
                },
              ],
            },
            {
              value: "惠州市",
              label: "惠州市",
              children: [
                {
                  value: "博罗县",
                  label: "博罗县",
                },
                {
                  value: "惠阳县",
                  label: "惠阳县",
                },
              ],
            },
          ],
        },
        {
          value: "湖南省",
          label: "湖南省",
          children: [
            {
              value: "长沙市",
              label: "长沙市",
              children: [
                {
                  value: "芙蓉区",
                  label: "芙蓉区",
                },
                {
                  value: "天心区",
                  label: "天心区",
                },
                {
                  value: "开福区",
                  label: "开福区",
                },
                {
                  value: "雨花区",
                  label: "雨花区",
                },
                {
                  value: "望城区",
                  label: "望城区",
                },
              ],
            },
            {
              value: "衡阳市",
              label: "衡阳市",
              children: [
                {
                  value: "石鼓区",
                  label: "石鼓区",
                },
                {
                  value: "蒸湘区",
                  label: "蒸湘区",
                },
                {
                  value: "南岳区",
                  label: "南岳区",
                },
                {
                  value: "衡阳县",
                  label: "衡阳县",
                },
                {
                  value: "衡南县",
                  label: "衡南县",
                },
                {
                  value: "衡山县",
                  label: "衡山县",
                },
                {
                  value: "衡东县",
                  label: "衡东县",
                },
                {
                  value: "祁东县",
                  label: "祁东县",
                },
              ],
            },
          ],
        },
      ],
      diqu: [],
      fullName: "",
      phone: "",
      detailed: "",
      moren: false,
    };
  },
  methods: {
    xinzen() {
      this.drawer = true;
      this.xiugai = false;
    },

    // 添加地址
    baochun() {
      if (
        this.fullName != "" &&
        this.phone != "" &&
        this.diqu.length != 0 &&
        this.detailed != ""
      ) {
        let diqus = "";
        this.diqu.forEach((item) => {
          diqus += item;
        });
        if (this.moren) {
          this.dizhiList.forEach((item) => (item.moren = false));
        }
        this.dizhiList.unshift({
          fullName: this.fullName,
          phone: this.phone,
          dizhiArr: this.dizhi,
          dizhi: diqus,
          detailed: this.detailed,
          moren: this.moren,
        });

        this.fullName = this.phone = this.detailed = "";
        this.moren = false;
        this.dizhi = [];
        this.drawer = false;
        window.localStorage.setItem(
          "addressLibrary",
          JSON.stringify(this.dizhiList)
        );
      } else {
        this.$message({
          message: "要好好填完地址信息哦",
          type: "warning",
        });
      }
    },

    deldizhi(index) {
      this.dizhiList.splice(index, 1);
      window.localStorage.setItem(
        "addressLibrary",
        JSON.stringify(this.dizhiList)
      );
    },
  },
  created() {
    this.dizhiList = JSON.parse(window.localStorage.getItem("addressLibrary"));
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/receiptData.scss";
</style>